import React, { Component } from 'react';
import {
  View,
  Text,
  NativeModules,
  DeviceEventEmitter,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  PermissionsAndroid,
  ScrollView,
  PanResponder,
  Animated,
  TextInput,
  Image
} from 'react-native';
import { getPixel } from '../common/utils'
import ImagePicker from 'react-native-image-picker'
import ImageCropper from 'react-native-image-crop-picker'

import { observer, inject } from 'mobx-react';

const ocr = NativeModules.OcrModule;
const options = {
  title: 'Select Avatar',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
  rotation: 90,
  noData: true,
};

const screenWidth = Dimensions.get('window').width
const screenHeight = Dimensions.get('window').height

@inject('store')
@observer
export default class App extends Component {
  pan7 = PanResponder.create({
    onMoveShouldSetPanResponder: (evt, gestureState) => {
      if (Math.abs(gestureState.dx) >= 1 && Math.abs(gestureState.dy) <= 3) {
        this._input01.blur();
        this._input02.blur();
        this._input11.blur();
        this._input12.blur();
        this._input21.blur();
        this._input22.blur();
        return true
      }
      return false
    },
    onPanResponderTerminate: (evt, gestureState) => {
      // 不切换
      // 还原
      Animated.timing(                  // 随时间变化而执行动画
        this.state.detailAnim,            // 动画中的变量值
        {
          toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
          duration: 0,              // 让动画持续一段时间
          useNativeDriver: true
        }
      ).start();
      Animated.timing(                  // 随时间变化而执行动画
        this.state.detailAnim,            // 动画中的变量值
        {
          toValue: 0,                   // 透明度最终变为1，即完全不透明
          duration: 300,              // 让动画持续一段时间
          useNativeDriver: true
        }
      ).start();
      if (this.state.whichBox == 1) {
        this._moveBox.setNativeProps({
          style: { height: this.state.firstHeight }
        })
      } else if (this.state.whichBox == 2) {
        this._moveBox.setNativeProps({
          style: { height: this.state.secHeight }
        })
      } else {
        this._moveBox.setNativeProps({
          style: { height: this.state.zeroHeight }
        })
      }
    },
    onPanResponderMove: (evt, gestureState) => {
      let temp1 = 0
      let temp2 = 0
      if (gestureState.dx > 0) {
        temp1 = gestureState.dx >= 100 ? 100 : gestureState.dx
      } else {
        temp2 = gestureState.dx <= -100 ? -100 : gestureState.dx
      }
      // 1板子在中间
      if (this.state.whichBox == 1) {
        if (gestureState.dx < 0) {
          // 左滑
          this._detailPlot1.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot2.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          // this._moveBox.setNativeProps({
          //     style: { height: temp2 / 100 * (this.state.firstHeight - this.state.secHeight) + this.state.firstHeight }
          // })
        } else if (gestureState.dx > 0) {
          // 右滑
          this._detailPlot1.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot0.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          // this._moveBox.setNativeProps({
          //     style: { height: -temp1 / 100 * (this.state.firstHeight - this.state.zeroHeight) + this.state.firstHeight }
          // })
        }
      } else if (this.state.whichBox == 2) {
        // 第二个板子在中间
        if (gestureState.dx < 0) {
          // 左滑
          this._detailPlot2.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot0.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          // this._moveBox.setNativeProps({
          //     style: { height: temp2 / 100 * (this.state.secHeight - this.state.zeroHeight) + this.state.secHeight }
          // })
        } else if (gestureState.dx > 0) {
          // 右滑
          this._detailPlot2.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot1.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          // this._moveBox.setNativeProps({
          //     style: { height: -temp1 / 100 * (this.state.secHeight - this.state.firstHeight) + this.state.secHeight }
          // })
        }
      } else {
        // 第0个板子在中间
        if (gestureState.dx < 0) {
          // 左滑
          this._detailPlot0.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot1.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          // this._moveBox.setNativeProps({
          //     style: { height: temp2 / 100 * (this.state.zeroHeight - this.state.firstHeight) + this.state.zeroHeight }
          // })
        } else if (gestureState.dx > 0) {
          // 右滑
          this._detailPlot0.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot2.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          // this._moveBox.setNativeProps({
          //     style: { height: -temp1 / 100 * (this.state.zeroHeight - this.state.secHeight) + this.state.zeroHeight }
          // })
        }
      }
    },
    onPanResponderRelease: (evt, gestureState) => {
      if (gestureState.dx >= 100 || gestureState.dx <= -100) {
        // 确认切换
        if (gestureState.dx < 0) {
          // 往左滑
          if (this.state.whichBox == 1) {
            // 第一个板子 
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true
                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值 
                  {
                    toValue: 0,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                if (this.state.isRight && this.state.index === this.state.detailPlotNumber - 2) {

                  this.state.detailPlots.splice(-1, 0, { core: '', step: '' })
                  this.setState({ zeroIndex: (this.state.index + 2) % (this.state.detailPlotNumber + 1), whichBox: 2, index: (this.state.index + 1) % (this.state.detailPlotNumber + 1), detailPlots: [...this.state.detailPlots], detailPlotNumber: this.state.detailPlotNumber + 1, isRight: true })

                } else {
                  this.setState({ zeroIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 2, index: (this.state.index + 1) % this.state.detailPlotNumber, isRight: true })

                }
                this._detailPlot0.setNativeProps({
                  style: { left: this.state.width }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: -this.state.width }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: 0 }
                })
              });

            });

            // this._moveBox.setNativeProps({
            //     style: { height: this.state.secHeight }
            // })

          } else if (this.state.whichBox == 2) {
            // 第二个板子
            // this._moveBox.setNativeProps({
            //     style: { height: this.state.zeroHeight }
            // })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true

                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: 0,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                if (this.state.isRight && this.state.index === this.state.detailPlotNumber - 2) {
                  this.state.detailPlots.splice(-1, 0, { core: '', step: '' })
                  this.setState({ firstIndex: (this.state.index + 2) % (this.state.detailPlotNumber + 1), whichBox: 0, index: (this.state.index + 1) % (this.state.detailPlotNumber + 1), detailPlots: [...this.state.detailPlots], detailPlotNumber: this.state.detailPlotNumber + 1, isRight: true })
                } else {
                  this.setState({ firstIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 0, index: (this.state.index + 1) % this.state.detailPlotNumber, isRight: true })

                }
                this._detailPlot0.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: this.state.width }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: -this.state.width }
                })
              });

            });
          } else {
            // 第0个板子         
            // this._moveBox.setNativeProps({
            //     style: { height: this.state.firstHeight }
            // })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true
                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                if (this.state.isRight && this.state.index === this.state.detailPlotNumber - 2) {

                  this.state.detailPlots.splice(-1, 0, { core: '', step: '' })
                  this.setState({ secIndex: (this.state.index + 2) % (this.state.detailPlotNumber + 1), whichBox: 1, index: (this.state.index + 1) % (this.state.detailPlotNumber + 1), detailPlots: [...this.state.detailPlots], detailPlotNumber: this.state.detailPlotNumber + 1, isRight: true })

                } else {
                  this.setState({ secIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 1, index: (this.state.index + 1) % this.state.detailPlotNumber, isRight: true })

                }

                this._detailPlot0.setNativeProps({
                  style: { left: -this.state.width, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: this.state.width, translateX: 0 }
                })
              });

            });

          }
        } else if (gestureState.dx > 0) {
          // 往右滑
          if (this.state.whichBox == 1) {
            // 第一个板子
            // this._moveBox.setNativeProps({
            //     style: { height: this.state.zeroHeight }
            // })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true

                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ secIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 0, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, isRight: false })
                this._detailPlot0.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: this.state.width, translateX: 0 }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: -this.state.width, translateX: 0 }
                })
              });
            });


          } else if (this.state.whichBox == 2) {
            // 第二个板子
            // this._moveBox.setNativeProps({
            //     style: { height: this.state.firstHeight }
            // })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true

                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ zeroIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 1, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, isRight: false })
                this._detailPlot0.setNativeProps({
                  style: { left: -this.state.width, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: this.state.width, translateX: 0 }
                })
              });
            });
          } else {
            // 第0个板子
            // this._moveBox.setNativeProps({
            //     style: { height: this.state.secHeight }
            // })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true
                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ firstIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 2, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, isRight: false })
                this._detailPlot0.setNativeProps({
                  style: { left: this.state.width, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: -this.state.width, translateX: 0 }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
              });
            });
          }
        }
      } else {
        // 不切换
        // 还原
        Animated.timing(                  // 随时间变化而执行动画
          this.state.detailAnim,            // 动画中的变量值
          {
            toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
            duration: 0,              // 让动画持续一段时间
            useNativeDriver: true
          }
        ).start(() => {
          Animated.timing(                  // 随时间变化而执行动画
            this.state.detailAnim,            // 动画中的变量值
            {
              toValue: 0,                   // 透明度最终变为1，即完全不透明
              duration: 300,              // 让动画持续一段时间
              useNativeDriver: true
            }
          ).start();
        });

      }
    }
  })
  state = {
    question: '',
    answer: false,

    // 集数 从0开始
    index: 0,
    whichBox: 1,
    // 三个班子对应的高度
    zeroHeight: 0,
    firstHeight: 0,
    secHeight: 0,
    // 剧情板子对应的index
    zeroIndex: 2,
    firstIndex: 0,
    secIndex: 1,

    // 分集剧情组件
    width: Dimensions.get('window').width - 8,

    // 动画参数
    detailAnim: new Animated.Value(0),

    // 第一个剧情板子第一次设置moveBox高度
    isFirstRefresh: true,
    detailPlotNumber: 3,
    detailPlots: [
      { core: '', step: '' },
      { core: '', step: '' },
      { core: '', step: '' },
    ],
    focus: false,
    isRight: false,
    isWrite: false,
    firstOrSec: 1,
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.question !== nextState.question) {
      return true
    }
    if (this.state.answer !== nextState.answer) {
      return true
    }
    if (this.state.zeroIndex !== nextState.zeroIndex) {
      return true
    }
    if (this.state.firstIndex !== nextState.firstIndex) {
      return true
    }
    if (this.state.isWrite !== nextState.isWrite) {
      return true
    }
    if (this.state.secIndex !== nextState.secIndex) {
      return true
    }
    return false;
  }
  componentDidMount = () => {
    // // 通用文字识别
    DeviceEventEmitter.addListener('recGeneralBasicQuestion', result => {
      var res = JSON.parse(result.result)
      var question = ''
      res.words_result.forEach((item, index) => {
        question = question + item.words
      })
      this.setState({ question: question })
    })
    DeviceEventEmitter.addListener('recGeneralBasicAnswer', result => {
      var res = JSON.parse(result.result)
      var question = ''
      res.words_result.forEach((item, index) => {
        question = question + item.words
      })
      if (this.state.firstOrSec === 1) {
        this.state.detailPlots[this.state.index].core = question
      } else {
        this.state.detailPlots[this.state.index].step = question
      }
      this.setState({ isWrite: !this.state.isWrite })
    })
  };

  getTextFromPhoto = async () => {
    const grant = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
    );
    if (grant === PermissionsAndroid.RESULTS.GRANTED) {
      ImagePicker.launchCamera(options, (response) => {
        ImageCropper.openCropper({
          path: response.uri,
          width: screenWidth,
          height: screenHeight,
          hideBottomControls: true,
          enableRotationGesture: false,
          freeStyleCropEnabled: true
        }).then(image => {
          ocr.recGeneralBasicQuestion(image.path.substr(7))
        });
      })
    }
  }

  AnswergetTextFromPhoto = async (index) => {
    this.setState({ firstOrSec: index })

    const grant = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
    );
    if (grant === PermissionsAndroid.RESULTS.GRANTED) {
      ImagePicker.launchCamera(options, (response) => {
        ImageCropper.openCropper({
          path: response.uri,
          width: screenWidth,
          height: screenHeight,
          hideBottomControls: true,
          enableRotationGesture: false,
          freeStyleCropEnabled: true
        }).then(image => {
          ocr.recGeneralBasicAnswer(image.path.substr(7))
        });
      })
    }
  }


  insertQuestion = () => {
    if (this.state.question === '') {
      alert('你还没拍题目')
    } else {
      var arr = []
      this.state.detailPlots.forEach((item, index) => {
        if (item.core !== '' || item.step !== '') {
          arr.push(item)
        }
      })
      var url = `${this.props.store.ip}/questionsInsert`
      var config = {
        method: 'POST',
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: "question=" + this.state.question + "&contents=" + JSON.stringify(arr) + "&userId=" + this.props.store.account.userId + "&class=" + this.props.store.account.class + "&name=" + this.props.store.account.name + "&school=" + this.props.store.account.school
      }
      fetch(url, config).then((response) => response.json())
    }
  }

  render() {

    return (
      <View style={{ flex: 1, alignItems: 'center', paddingHorizontal: getPixel(8), flexDirection: 'column' }}>
        <ScrollView style={{ flex: 1, width: '100%' }} keyboardDismissMode='on-drag' showsVerticalScrollIndicator={false}>
          <Text stlye={{ fontSize: getPixel(15), color: '#333333' }}>{this.state.question}</Text>
          <TouchableOpacity onPress={() => {
            this.getTextFromPhoto('')
          }} style={{ width: '100%', marginVertical: getPixel(15) }} >
            <Text style={{ paddingVertical: getPixel(15), fontSize: getPixel(16), textAlign: 'center', backgroundColor: 'skyblue', borderRadius: getPixel(10) }}>拍题目</Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={() => {
            this.setState({ answer: true })
          }} style={{ width: '100%', marginVertical: getPixel(15) }} >
            <Text style={{ paddingVertical: getPixel(15), fontSize: getPixel(16), textAlign: 'center', backgroundColor: 'skyblue', borderRadius: getPixel(10) }}>写答案</Text>
          </TouchableOpacity>

          {this.state.answer ?
            <Animated.View key='detailSwiper' {...this.pan7.panHandlers} style={{ width: '100%' }}>
              <Animated.View ref={ref => this._moveBox = ref} style={{ width: '100%', position: 'relative', height: getPixel(600) }}>

                {/* 剧情第0个板子 */}
                <Animated.View ref={ref => this._detailPlot0 = ref} style={{ borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: getPixel(10), alignItems: 'center', width: '100%', position: 'absolute', left: -this.state.width }}
                // onLayout={() => {
                //     let handle0 = findNodeHandle(this._detailPlot0);
                //     UIManager.measure(handle0, (x, y, width, height, pageX, pageY) => {
                // this.setState({ zeroHeight: height })
                // if (this.state.photo) {
                //     this._moveBox.setNativeProps({
                //         style: { height: height }
                //     })
                //     this.setState({ photo: false })
                // }
                // })
                // }}
                >
                  <View style={{ width: '100%', flexDirection: 'column', alignItems: 'center' }}>
                    <Text style={{ fontSize: 17, lineHeight: 20 }}>第{this.state.zeroIndex + 1}步  </Text>
                    <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%', }}>
                      <TextInput
                        ref={ref => this._input01 = ref}
                        value={this.state.detailPlots[this.state.zeroIndex].core}

                        multiline={true}
                        placeholder='输入你的思路'
                        style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(50), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                        onChangeText={(text) => {
                          this.state.detailPlots[this.state.index].core = text
                          this.setState({ isWrite: !this.state.isWrite })
                        }}
                      />
                      <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                        this.AnswergetTextFromPhoto(1)
                      }}>
                        <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                      </TouchableOpacity>
                    </View>
                    <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%' }}>

                      <TextInput
                        ref={ref => this._input02 = ref}
                        value={this.state.detailPlots[this.state.zeroIndex].step}

                        multiline={true}
                        placeholder='输入你的答案'
                        style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(100), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                        onChangeText={(text) => {
                          this.state.detailPlots[this.state.index].step = text
                          this.setState({ isWrite: !this.state.isWrite })
                        }}
                      />
                      <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                        this.AnswergetTextFromPhoto(2)
                      }}>
                        <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                      </TouchableOpacity>
                    </View>

                  </View>
                </Animated.View>

                {/* 剧情第一个板子 */}
                <Animated.View ref={ref => this._detailPlot1 = ref} style={{ borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: getPixel(10), alignItems: 'center', width: '100%', position: 'absolute', left: 0 }}
                // onLayout={() => {
                //     let handle = findNodeHandle(this._detailPlot1);
                //     UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {

                //         if (this.state.isFirstRefresh) {
                //             this._moveBox.setNativeProps({
                //                 style: { height: height }
                //             })
                //             this._detailPlot1.setNativeProps({ style: { position: 'absolute' } })
                //             this.setState({ isFirstRefresh: false, firstHeight: height })
                //         } else {
                //             if (this.state.photo) {
                //                 this._moveBox.setNativeProps({
                //                     style: { height: height }
                //                 })
                //                 this.setState({ photo: false })
                //             }
                //             this.setState({ firstHeight: height })
                //         }
                //     })
                // }} 
                >
                  <View style={{ width: '100%', flexDirection: 'column', alignItems: 'center' }}>
                    <Text style={{ fontSize: 17, lineHeight: 20 }}>第{this.state.firstIndex + 1}步  </Text>

                    <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%', }}>

                      <TextInput
                        ref={ref => this._input11 = ref}
                        value={this.state.detailPlots[this.state.firstIndex].core}
                        multiline={true}
                        placeholder='输入你的思路'
                        style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(50), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                        onChangeText={(text) => {
                          this.state.detailPlots[this.state.index].core = text
                          this.setState({ isWrite: !this.state.isWrite })
                        }}
                      />
                      <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                        this.AnswergetTextFromPhoto(1)
                      }}>
                        <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                      </TouchableOpacity>
                    </View>
                    <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%', }}>

                      <TextInput
                        ref={ref => this._input12 = ref}
                        value={this.state.detailPlots[this.state.firstIndex].step}

                        multiline={true}
                        placeholder='输入你的步骤'
                        style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(100), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                        onChangeText={(text) => {
                          this.state.detailPlots[this.state.index].step = text
                          this.setState({ isWrite: !this.state.isWrite })
                        }}
                      />
                      <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                        this.AnswergetTextFromPhoto(2)
                      }}>
                        <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                      </TouchableOpacity>
                    </View>
                  </View>
                </Animated.View>

                {/* 剧情第二个板子 */}
                <Animated.View ref={ref => this._detailPlot2 = ref} style={{ borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: getPixel(10), alignItems: 'center', width: '100%', position: 'absolute', left: this.state.width }}
                // onLayout={() => {
                //     let handle2 = findNodeHandle(this._detailPlot2);
                //     UIManager.measure(handle2, (x, y, width, height, pageX, pageY) => {
                //         this.setState({ secHeight: height })
                //         if (this.state.photo) {
                //             this._moveBox.setNativeProps({
                //                 style: { height: height }
                //             })
                //             this.setState({ photo: false })

                //         }
                //     })
                // }}
                >
                  <View style={{ width: '100%', flexDirection: 'column', alignItems: 'center' }}>
                    <Text style={{ fontSize: 17, lineHeight: 20 }}>第{this.state.secIndex + 1}步  </Text>
                    <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%' }}>

                      <TextInput
                        ref={ref => this._input21 = ref}
                        value={this.state.detailPlots[this.state.secIndex].core}

                        multiline={true}
                        placeholder='输入你的思路'
                        style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(50), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                        onChangeText={(text) => {
                          this.state.detailPlots[this.state.index].core = text
                          this.setState({ isWrite: !this.state.isWrite })
                        }}
                      />
                      <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                        this.AnswergetTextFromPhoto(1)
                      }}>
                        <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                      </TouchableOpacity>
                    </View>
                    <View style={{ position: 'relative', marginTop: getPixel(10), width: '100%' }}>

                      <TextInput
                        ref={ref => this._input22 = ref}
                        value={this.state.detailPlots[this.state.secIndex].step}

                        multiline={true}
                        placeholder='输入你的答案'
                        style={{ fontSize: getPixel(15), width: '100%', minHeight: getPixel(100), textAlignVertical: 'top', borderWidth: getPixel(1), borderColor: '#ccc', borderRadius: getPixel(8), paddingHorizontal: getPixel(10), color: '#333333' }}
                        onChangeText={(text) => {
                          this.state.detailPlots[this.state.index].step = text
                          this.setState({ isWrite: !this.state.isWrite })
                        }}
                      />
                      <TouchableOpacity style={{ position: 'absolute', bottom: getPixel(5), right: getPixel(10) }} onPress={() => {
                        this.AnswergetTextFromPhoto(2)
                      }}>
                        <Image style={{ height: getPixel(30), width: getPixel(30), }} source={require('../../assets/images/small_photo.png')} />
                      </TouchableOpacity>
                    </View>

                  </View>
                </Animated.View>
              </Animated.View >

            </Animated.View >
            : null}
        </ScrollView>
        <TouchableOpacity onPress={() => {
          this.insertQuestion()
        }} style={{ width: '100%' }} >
          <Text style={{ paddingVertical: getPixel(15), fontSize: getPixel(16), textAlign: 'center', backgroundColor: '#a3ec93', borderRadius: getPixel(10) }}>发布问题</Text>
        </TouchableOpacity>
      </View >
    );
  }
}

const styles = StyleSheet.create({
  text: {
    marginLeft: 15,
    padding: 5,
    fontSize: 20,
  }
})
